<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="css/style.css" />
	<body>
		<header class="margin">
			<img src="images/logo-2.png"  class="logo"/>
			<div class="head-r">
				<a href="index.html">返回继续逛逛</a>
				<img src="images/head-s.jpg" />
			</div>
		</header>
		<section id="main">
			<div class="margin">
				<form>
					<h3>会员登录</h3>
					<div class="form">
						<input type="text" id="txt" placeholder="用户名/手机/邮箱"/>
						<span></span>
						<input type="password" id="pass" placeholder="密码"/>
						<span id="msg"></span>
						<input type="button" value="登录" id="btn" />
					</div>
					<div class="zhuce">
					<a href="zhuce.html">免费注册</a>
					<a href="#">忘记密码</a>
					</div>
				</form>
			</div>
		</section>
	</body>
	<script type="text/javascript" src="libs/jquery.js" ></script>
	<script>
		class Login{
        constructor(){
            this.url = "/api/login";
            this.init()
        }
        init(){
            var that = this;
            $("#btn").click(function(){
                that.load()
            })
        }
        load(){
            var that = this;
            $.ajax({
                type:"POST",
                url:this.url,
                data:{
                    username:$("#txt").val(),
                    password:$("#pass").val()
                },
                success:function(res){
                            $("#msg")[0].innerHTML =JSON.parse(JSON.stringify(res)).msg 
                            if($("#msg")[0].innerHTML =="登录成功"){
                            setTimeout(()=>{
                            	location.href = "index.html";
                            },1000)
                            }
                             

                    }
                
            })
        }
        
   }
    new Login()
	</script>
</html>
